<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框-InputDemo</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input class="form-control" type="text" placeholder="UserName" />
        </div>
        <div class="input-group input-group-lg">
            <input class="form-control" type="text" placeholder="UserName" />
            <span class="input-group-addon">.00</span>
        </div>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" type="text" placeholder="UserName" />
            <span class="input-group-addon">.00</span>
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                            Change
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">1</a> </li>
                            <li><a href="#">2</a> </li>
                            <li><a href="#">3</a> </li>
                            <li><a href="#">4</a> </li>
                        </ul>
                    </div>
                    <input type="text" class="form-control" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>